<div class="col-lg-4 static-product-sidebar">
    <div class="contact-name visible-lg">SẢN PHẨM HOT NHẤT</div>
    <div class="scroll-lg-product visible-lg" style="display:none;">
        <?php  echo do_shortcode('[featured_products per_page="12"]')  ?>
    </div>
    <div class="contact-name visible-sm">SẢN PHẨM HOT NHẤT</div>
    <div id="carousel-example-captions" class="carousel slide visible-sm"style="margin-top:0;">
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
         <?php  echo do_shortcode('[featured_products per_page="12"]')  ?>
      </div>
      <script type="text/javascript">
      // $('.carousel-inner .products .item').appendTo($('.carousel-inner'));
      // $('.carousel-inner .woocommerce').remove();
        var html; 
        var html_sm = '';
        var first_html_sm = false;
        var num_mod_product =  $('#carousel-example-captions .carousel-inner .products .mod-product').length;
        $('#carousel-example-captions .carousel-inner .products .mod-product').each(function(){
          if(first_html_sm==false){
            if($(this).hasClass('odd')) html_sm+= '<div class="item active">'+'<div class="mod-product col-sm-3 col-lg-6 col-6 text-center">'+$(this).html()+'</div>';
            else html_sm+= '<div class="mod-product col-sm-3 col-lg-6 col-6 text-center">'+$(this).html()+'</div>'+'</div>';
            first_html_sm = true;
          }else{
            if($(this).hasClass('odd')) html_sm+= '<div class="item">'+'<div class="mod-product col-sm-3 col-lg-6 col-6 text-center">'+$(this).html()+'</div>';
            else html_sm+= '<div class="mod-product col-sm-3 col-lg-6 col-6 text-center">'+$(this).html()+'</div>'+'</div>';
          }
        });
        if(num_mod_product%2==1) html+= '</div>';
        $(html_sm).appendTo($('#carousel-example-captions .carousel-inner'));
        $('#carousel-example-captions .carousel-inner .woocommerce').remove();
      </script>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
        <span class="icon-next"></span>
      </a>
    </div>
</div>
<div class="col-12">
    <div class="contact-name visible-md">SẢN PHẨM HOT NHẤT</div>
    <div class="scroll-sm-product visible-md">
        <?php  echo do_shortcode('[featured_products per_page="12"]')  ?>
    </div>
</div>
<script>
function static_scroll(){
  var content_height = $('.static-product-sidebar').prev().height() - 250;
  var offset_scroll = 405;
  if(!$('.header').hasClass('news')) {
    offset_scroll = 650;
    content_height += 250;
  }
  if(window.pageYOffset>offset_scroll && window.pageYOffset< content_height){
    var screensize = $(window).width();
    var mright = (screensize - 976)/2 - 15;
    $('.static-product-sidebar').css('position','fixed');
    $('.static-product-sidebar').css('top','20px');
    $('.static-product-sidebar').css('width','335px');
    $('.static-product-sidebar').css('right',mright+'px');
  }else if(window.pageYOffset>=content_height){
    $('.static-product-sidebar').css('top',(content_height - window.pageYOffset)+'px');
  }else{
    $('.static-product-sidebar').css('position','');
    $('.static-product-sidebar').css('top','');
    $('.static-product-sidebar').css('width','');
    $('.static-product-sidebar').css('right','');
  }
}
window.onscroll=function(oEvent){
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
	if(!isiPad&&$(window).width()>=768 && $('.checkout').length == 0) static_scroll();
}
</script>
<style type="text/css">
  .contact-name {
  font-size: 20px;
  }
  .ptitle a{
        color: black;
    }
</style>